<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{ margin:0; padding:0; font-family:"微软雅黑";}
	#outer{ background:url(game_bg.jpg) 0 0 no-repeat; height:480px; width:320px; position:relative;margin: 0 auto;}
	#fraction{ position:absolute; font-weight:bold; font-size:16px; color:white; left:65px; top:13px;}
	#time{ position:absolute; background:url(progress.png) 0 0 no-repeat; width:180px; height:16px; left: 63px;top: 66px;}
	#wolfs img{ position:absolute;}
	#menu{ position:absolute; width:320px; text-align:center; left:0; top:200px;}
	#start,#handle,#end{ line-height:50px; font-size:30px; font-weight:bold; color:#F00; display:block; text-decoration:none;}
	#end{ position:absolute; width:320px; text-align:center; top:200px; left:0; display:none;}
	#reload{color: #f00;font-size: 30px;position: absolute;bottom: 0px;display:none;}
	#baffle{width:320px;height:440px;color:#f00;font-size:30px;position:absolute;top:0px;left:0px;display:none;}
	</style>
</head>
<body>
<div id="outer">
	<div id="fraction">0</div>
    <div id="time"></div>
    <div id="wolfs">
    </div>
    <div id="menu">
        <a href="#" id="start">start</a>
    </div>
    <div id="end">game over!</div>
    <a id='reload'>重新开始</a>
    <div id="baffle">&nbsp;</div>
</div>
<script type="text/javascript">
	//锅打灰太狼游戏
	var timer = document.getElementById("time"), //进度条
		wolfHoles = document.getElementById("wolfs"), //进度条
		startBtn = document.getElementById("start"),//开始按钮
		endBtn = document.getElementById("end"),//结束语
		reload = document.getElementById("reload"),//重新开始
		// liftCircle = [0,1,2,3,4,5,4,3,2,1,0],//动画周期
		fraction = document.getElementById("fraction"),
		score = 0,//分数
		//洞穴坐标
		arrPos = [{l:"98px",t:"115px"},{l:"17px",t:"160px"},{l:"15px",t:"221px"},{l:"30px",t:"294px"},{l:"122px",t:"274px"},{l:"207px",t:"296px"},{l:"200px",t:"212px"},{l:"187px",t:"142px"},{l:"100px",t:"192px"}];

		// //开始按钮事件
		// startBtn.onclick = function(){
		// 	startBtn.style.display = "none";
		// 	time();
		// 	var main = setInterval(function(){
		// 		if(timer.offsetWidth > 0){
		// 			creatWolf();
		// 		}else{
		// 			clearInterval(main);
		// 		}
		// 	},1000);
		// };
		// //重新开始按钮
		// reload.onclick = function(){
		// 	//reload默认参数false，使用本地缓存刷新页面，true去服务器重新取得页面
		// 	location.reload();
		// }
		// //进度条函数
		// function time(){
		// 	var timCounter = setInterval(function(){
		// 		//进度条结束前，每秒递减
		// 		if(timer.offsetWidth > 0){
		// 			timer.style.width = (timer.offsetWidth -20) + "px";
		// 		}else{
		// 			//清除计时器
		// 			clearInterval(timCounter);
		// 			endBtn.innerHTML = "game over!<br/>您的得分是：" + fraction.innerHTML;
		// 			endBtn.style.display = "block";
		// 			reload.style.display = "block";
		// 		}
		// 	}, 1000);
		// }

		// //创建狼
		// function creatWolf(){
		// 	//创建狼img
		// 	var wolf = document.createElement("img");
		// 	//设置出现狼种类
		// 	var wolfType = rand(0, 10) > 7 ? "x": "h";
		// 	//随机产生狼洞穴坐标
		// 	var position = arrPos[rand(0,9)];
		// 	//初始化index
		// 	wolf.index = 0;
		// 	wolf.clicked = false;
		// 	//设置img的src属性
		// 	wolf.src = wolfType + wolf.index + ".png";
		// 	//添加狼到页面
		// 	wolfHoles.appendChild(wolf);
		// 	//设置狼坐标
		// 	wolf.style.left = position.l;
		// 	wolf.style.top = position.t;
		// 	var tmp = 0;
		// 	var showTime = setInterval(function(){
		// 		tmp++;
		// 		if(tmp < liftCircle.length){
		// 			wolf.index = liftCircle[tmp];
		// 			wolf.src = wolfType + wolf.index + ".png"
		// 		}else{
		// 			clearInterval(showTime);
		// 			wolfHoles.removeChild(wolf);
		// 		}
		// 	},200);

		// 	//绑定狼的挨揍事件
		// 	wolf.onclick = function(){
		// 		//如果被点击过，不再执行积分及动画逻辑
		// 		if(wolf.clicked) return;
		// 		wolf.index = 5;
		// 		scoreCounter(wolfType);
		// 		clearInterval(showTime);
		// 		var hitWolf = setInterval(function(){
		// 			if(wolf.index < 10){
		// 				wolf.src = wolfType + wolf.index + ".png";
		// 				wolf.index++;
		// 			}else{
		// 				clearInterval(hitWolf);
		// 				wolfHoles.removeChild(wolf);
		// 			}
		// 		}, 200);
		// 		//设置当前狼为被点击状态
		// 		wolf.clicked = true;
		// 	};
		// }

		// //随机函数
		// function rand(min, max){
		// 	return parseInt(Math.random()*(max - min) + min);
		// }

		// //分数计算
		// function scoreCounter(wolfType){
		// 	if(wolfType == "h"){
		// 		score += 10;
		// 	}else{
		// 		score -=10;
		// 	}
		// 	fraction.innerHTML = score;
		// }
</script>
</body>
</html>